<template>
  <div class="moments-layout">
    <!-- 左侧菜单和操作区域 -->
    <div class="moments-sidebar">
      <div class="sidebar-header">
        <h1 class="title clickable" @click="goToApps">
          <el-icon><Star /></el-icon>
          Moments
        </h1>
        <p class="subtitle">记录生活中的点点滴滴</p>
      </div>

      <div class="sidebar-actions">
        <el-button type="primary" @click="goToCreate" class="action-button">
          <el-icon><Plus /></el-icon>
          写点什么
        </el-button>
        <el-button @click="goToStats" class="action-button">
          <el-icon><DataAnalysis /></el-icon>
          统计
        </el-button>
      </div>

      <div class="sidebar-filters">
        <el-form :model="filters" label-position="top">
          <el-form-item label="心情">
            <el-select v-model="filters.mood" placeholder="选择心情" clearable>
              <el-option
                v-for="mood in moodOptions"
                :key="mood.value"
                :label="mood.label"
                :value="mood.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-input
              v-model="filters.tag"
              placeholder="输入标签"
              clearable
            />
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleDateChange"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" style="width: 100%">搜索</el-button>
            <el-button @click="handleReset" style="width: 100%; margin-top: 8px">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 右侧路由内容区域 -->
    <div class="moments-content">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, provide } from 'vue'
import { useRouter } from 'vue-router'
import {
  Star, Plus, DataAnalysis
} from '@element-plus/icons-vue'
import { MoodType } from '../types'

const router = useRouter()

// 当前选择的风格
const currentStyle = ref('modern')

// 筛选条件
const filters = reactive({
  mood: '',
  tag: '',
  startDate: '',
  endDate: ''
})

const dateRange = ref<[string, string] | null>(null)

// 心情选项
const moodOptions = [
  { value: MoodType.HAPPY, label: '😊 开心' },
  { value: MoodType.SAD, label: '😢 难过' },
  { value: MoodType.EXCITED, label: '🎉 兴奋' },
  { value: MoodType.PEACEFUL, label: '😌 平静' },
  { value: MoodType.ANXIOUS, label: '😰 焦虑' },
  { value: MoodType.GRATEFUL, label: '🙏 感恩' },
  { value: MoodType.THOUGHTFUL, label: '🤔 沉思' },
  { value: MoodType.NOSTALGIC, label: '😌 怀念' }
]

// 日期范围变化
const handleDateChange = (value: [string, string] | null) => {
  if (value) {
    filters.startDate = value[0]
    filters.endDate = value[1]
  } else {
    filters.startDate = ''
    filters.endDate = ''
  }
}

// 搜索
const handleSearch = () => {
  // 触发搜索事件，子组件会监听
}

// 重置
const handleReset = () => {
  Object.assign(filters, {
    mood: '',
    tag: '',
    startDate: '',
    endDate: ''
  })
  dateRange.value = null
  // 触发重置事件
}

// 跳转到创建页面
const goToCreate = () => {
  router.push('/moments/create')
}

// 跳转到统计页面
const goToStats = () => {
  router.push('/moments/stats')
}

// 跳转到应用列表页面
const goToApps = () => {
  router.push('/apps')
}

// 提供给子组件使用的数据
provide('momentsFilters', filters)
provide('momentsStyle', currentStyle)
provide('searchTrigger', handleSearch)
provide('resetTrigger', handleReset)
</script>

<style scoped>
.moments-layout {
  height: 100vh;
  display: flex;
  background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  overflow: hidden;
}

/* 左侧边栏 */
.moments-sidebar {
  width: 320px;
  flex-shrink: 0;
  background: #F3F3F3;
  border-right: 1px solid #d4c5b0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.sidebar-header {
  padding: 20px;
  background: #fefdfb;
  border: 2px solid #d4c5b0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
  position: relative;
}

/* 纸张纹理 */
.sidebar-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(139, 115, 85, 0.02) 2px,
      rgba(139, 115, 85, 0.02) 3px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(139, 115, 85, 0.02) 2px,
      rgba(139, 115, 85, 0.02) 3px
    );
  pointer-events: none;
  opacity: 0.5;
}

.title {
  margin: 0;
  font-size: 28px;
  color: #5d4037;
  font-family: 'Georgia', serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.title.clickable {
  cursor: pointer;
  transition: all 0.3s ease;
}

.title.clickable:hover {
  color: #42b883;
  transform: scale(1.02);
}

.subtitle {
  margin: 8px 0 0 0;
  font-size: 14px;
  color: #8b7355;
  font-family: 'STKaiti', 'KaiTi', serif;
  position: relative;
  z-index: 1;
}

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.action-button {
  width: 100%;
}

.sidebar-filters {
  flex: 1;
  padding: 20px;
  background: #fefdfb;
  border: 2px solid #d4c5b0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidebar-filters :deep(.el-form-item) {
  margin-bottom: 16px;
}

.sidebar-filters :deep(.el-select),
.sidebar-filters :deep(.el-input) {
  width: 100%;
}

/* 右侧内容区域 */
.moments-content {
  flex: 1;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .moments-layout {
    flex-direction: column;
  }

  .moments-sidebar {
    width: 100%;
    height: auto;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid #d4c5b0;
  }

  .sidebar-header {
    padding: 16px;
  }

  .title {
    font-size: 24px;
  }

  .subtitle {
    font-size: 12px;
  }

  .sidebar-filters {
    padding: 16px;
  }

  .style-selector :deep(.el-radio-group) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
</style>